<template>
  <Layout>
    <SliderContent
      :slider-title="$t('ProductCategories')"
      :content-nav="$t('Products') + ' > ' + (curNav.name || '')"
    >
      <template #slider>
        <Tree :data="treeData" @click="handleClickItem"></Tree>
      </template>
      <template #content>
        <a-row :gutter="[30, 7]">
          <a-col
            class="product-list"
            :xs="12"
            :sm="8"
            v-for="(item, index) in productList"
            :key="item.id"
          >
            <a
              class="product-item"
              :href="'/product/detail/?id=' + item.id"
              :title="item.name"
            >
              <div class="cover-wrap">
                <div class="cover">
                  <img :src="item.pic" :alt="item.name" />
                </div>
              </div>
              <div class="name ellipsis-2">{{ item.name }}</div>
            </a>
          </a-col>
        </a-row>

        <div class="pagination" v-if="productList.length">
          <a-pagination
            v-model:current="curPage"
            show-quick-jumper
            :total="productList.length"
            @change="handleChangePage"
            :show-total="(total) => $t('TotalItems', { total: total })"
          />
        </div>
      </template>
    </SliderContent>
  </Layout>
</template>

<script setup>
import Layout from "@/components/Layout.vue";
import SliderContent from "@/components/SliderContent.vue";
import Tree from "@/components/Tree.vue";
import { onBeforeMount, ref } from "vue";
import { getClassify, getProlist } from "@/api/home";
const curPage = ref(1);
const curNav = ref({});
const treeData = ref([]);
const productList = ref([]);

onBeforeMount(() => {
  const params = new URLSearchParams(window.location.search);
  getClassify().then((res) => {
    treeData.value = res.data;
    if (res.data && res.data.length > 0) {
      if (params.get("cid")) {
        handleFindClassify(params.get("cid"));
      } else {
        handleClickItem(res.data[0]);
      }
    }
  });
});

const handleFindClassify = (cid) => {
  const item = treeData.value.find((item) => item.id == cid);
  handleClickItem(item || treeData[0]);
};

const handleClickItem = (classify) => {
  curPage.value = 1;
  curNav.value = classify;
  handleGetList();
};

const handleChangePage = (page, pageSize) => {
  curPage.value = page;
  handleGetList();
};

const handleGetList = () => {
  getProlist({
    pagenum: curPage.value,
    field: "",
    order: "",
    bid: "",
    cid: curNav.value.id,
    area: "",
    latitude: "",
    longitude: "",
    mendian_id: 0,
  }).then((res) => {
    productList.value = res.data || [];
  });
};
</script>

<style lang="less">
.cover-wrap {
  height: 0;
  padding-bottom: 100%;
  position: relative;
  .cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    overflow: hidden;

    img {
      object-fit: cover;
      object-position: center;
      width: 100%;
      height: 100%;
    }
  }
}
.product-item {
  text-align: center;
  display: block;

  .name {
    margin: 8px 0;
    color: #1a1a1a;
    font-size: 8px;
    text-decoration: none;
    max-height: 24px;
    line-height: 1.5;
  }
}

.pagination {
  text-align: right;
}
</style>
